<template>
  <div class="ccui-app-container contract-approval">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        :formProp="formData"
        @search="search"
        :isShowSearch="isShowSearch"
        class="ccui-highsearch"
        :selectClear="true"
        :isShow="isShow"
      >
      <div class="ccui-tab-wrapper">
        <el-button
          :type="isActive === index ? 'table-top-active' : 'table-top'"
          size="mini"
          v-for="(item, index) in focuses"
          :key="index"
          @click="tabChange(item.focus)"
        >
          <template v-if="item.focus === 'item-list' && totalNum !== null"
            >全部{{ isActive === 0 ? `(${totalNum})` : "" }}
          </template>
          <template v-else-if="item.focus === 'approved' && totalNum !== null"
            >待审批{{ isActive === 1 ? `(${totalNum})` : "" }}
          </template>
          <template
            v-else-if="item.focus === 'pending-approval' && totalNum !== null"
            >已审批{{ isActive === 2 ? `(${totalNum})` : "" }}
          </template>
        </el-button>
      </div>
                <el-input
                  v-model="formData.orderName"
                  clearable
                  searchLabel="订单名称"
                  placeholder="请输入订单名称模糊查询"
                  slot="searchItem2"
                  @blur="handleTrim('orderName')"
                />
                <el-input
                  v-model="formData.orderNo"
                  clearable
                  searchLabel="订单编号"
                  placeholder="请输入订单编号模糊查询"
                  slot="searchItem1"
                />
                <el-input
                  v-model="formData.thirdCategoriesOfName"
                  clearable
                  searchLabel="分类名称"
                  placeholder="请输入分类名称模糊查询"
                  slot="searchItem3"
                  @blur="handleTrim('thirdCategoriesOfName')"
                />
              <el-input
                v-model="formData.partyBName"
                clearable
                searchLabel="供应商"
                placeholder="请输入供应商模糊查询"
                slot="searchItem4"
              />
              <el-input
                v-model="formData.reportInOrgName"
                clearable
                searchLabel="填报单位"
                placeholder="请输入填报单位模糊查询"
                slot="searchItem5"
              />
              <el-date-picker
                v-model="formData.applyTime"
                :clearable="true"
                align="right"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                searchLabel="订单发出时间"
                @change="handleTime"
                slot="searchItem6"
              />
              <!-- <el-select
                v-model="formData.status"
                clearable
                placeholder="请选择审批状态"
                searchLabel="审批状态"
                @change="searchSelect(formData.status)"
                slot="searchItem7"
              >
                <el-option
                  v-for="item in workItemList"
                  :key="item.dicKey"
                  :value="item.dicKey"
                  :label="item.dicValue"
                  >{{ item.dicValue }}</el-option
                >
              </el-select> -->
              <!-- <el-input
                v-model="formData.businessBillTypeName"
                clearable
                searchLabel="审批类型："
                placeholder="请输入审批类型查询"
              /> -->
              <el-select
                v-model="formData.businessBillTypes"
                clearable
                placeholder="请选择审批类型"
                searchLabel="审批类型"
                slot="searchItem8"
              >
                <el-option
                  v-for="item in businessBillList"
                  :key="item.dicKey"
                  :value="item.dicKey"
                  :label="item.dicValue"
                  >{{ item.dicValue }}</el-option
                >
              </el-select>
              <!-- <el-select
                v-model="formData.approveStatus"
                clearable
                placeholder="请选择审批结果"
                searchLabel="审批结果"
                slot="searchItem9"
              >
                <el-option
                  v-for="item in approveStatusBillList"
                  :key="item.dicKey"
                  :value="item.dicKey"
                  :label="item.dicValue"
                  >{{ item.dicValue }}</el-option
                >
              </el-select> -->
            </el-search>
    </div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        ref="multipleTable"
        :data="tableData"
        :fit="true"
        border
        class="ccui-multifunctional-table"
        max-height="20000"
        @cell-click="cellClick"
        :cell-style="cellStyle"
      >
        <template v-for="(table, index) in tableColumnData">
          <el-table-column
            :fixed="table.fixed || false"
            :type="table.type"
            :key="index"
            :label="table.label"
            :min-width="table.width"
            :prop="table.prop"
            :filters="table.filters"
            :formatter="formatterList[table.formatterName]"
            :show-overflow-tooltip="true"
            :align="table.align"
            :header-align="table.headerAlign || 'left'"
          ></el-table-column>
        </template>

        <el-table-column label="操作" width="80" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="true"
              size="mini"
              type="text"
              @click="handleGoEdit(scope.row)"
              >审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="ccui-table-footer" v-show="isShowPagination">
        <div id="ccui-paging">
          <el-pagination
            :total="totalNum"
            :page-size="getLocalPageSize()"
            :current-page="pageNoCode"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            popper-class="ccui-paging-page-size-popper"
            @size-change="
              val => {
                handleSizeChange(val, 'pending');
              }
            "
            @current-change="
              val => {
                handleCurrentChange(val, 'pending');
              }
            "
          />
          <el-button
            class="ccui-pagination-btn"
            size="mini"
            type="default"
            @click="handleSizeChange('none')"
            >确定
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import orderEntryMixins from "../mixins/orderEntryMixins";

export default {
  name: "un-submitted",
  mixins: [orderEntryMixins],
  data() {
    return {
      isActive: 1,
      isShowSearch: false,
      isShow: true,
    };
  },
  methods: {
    // // 删除方法
    // handleDelete(r) {
    //   let objMessage = {
    //     title: "删除确认",
    //     content: "确定要删除吗?",
    //     confirmButtonText: "确定",
    //     loadingMessage: "删除中,请稍等..."
    //   };
    //   let params = {
    //     ids: [r.id],
    //     isShowLoading: true,
    //     loadingMessage: objMessage.loadingMessage
    //   };
    //   this.deleteMessageBox(objMessage, params, 2, this.removeOrder);
    // }
    // handleGoEdit(row){
    //   this.$store.dispatch("setBusinessList", row);
    // }
  },
  activated() {
    this.getList({},'pending');
  }
};
</script>

<style scoped lang="scss">
.contract-approval {
  /deep/ .el-searchs {
    display: none;
  }
  /deep/ .el-search .icon-ccui-downdown {
    display: none;
  }
}
// ::v-deep {
//   .el-input input {
//     padding-right: 50px;
//   }
// }
</style>
